<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./lib/react.js"></script>
    <script src="./lib/react_dom.js"></script>
    <script src="./lib/babel.js"></script>

    <script>
      class App extends React.Component {
        constructor() {
          super()
          this.state = {
            message: 'hello world',
          }
        }

        render() {
          const { message } = this.state
          const element = React.createElement(
            'div',
            null,
            /*#__PURE__*/ React.createElement(
              'div',
              {
                className: 'header',
              },
              'Header'
            ),
            /*#__PURE__*/ React.createElement(
              'div',
              {
                className: 'Content',
              },
              /*#__PURE__*/ React.createElement('div', null, 'Banner'),
              /*#__PURE__*/ React.createElement(
                'ul',
                null,
                /*#__PURE__*/ React.createElement(
                  'li',
                  null,
                  '\u5217\u8868\u6570\u636E1'
                ),
                /*#__PURE__*/ React.createElement(
                  'li',
                  null,
                  '\u5217\u8868\u6570\u636E2'
                ),
                /*#__PURE__*/ React.createElement(
                  'li',
                  null,
                  '\u5217\u8868\u6570\u636E3'
                ),
                /*#__PURE__*/ React.createElement(
                  'li',
                  null,
                  '\u5217\u8868\u6570\u636E4'
                ),
                /*#__PURE__*/ React.createElement(
                  'li',
                  null,
                  '\u5217\u8868\u6570\u636E5'
                )
              )
            ),
            /*#__PURE__*/ React.createElement(
              'div',
              {
                className: 'footer',
              },
              'Footer'
            )
          )

          console.log(element)

          return element
        }
      }

      const root = ReactDOM.createRoot(document.querySelector('#root'))
      // render: 可以渲染组件或dom元素
      root.render(React.createElement(App, null))
    </script>
  </body>
</html>
